<template>
  <div style="background: #f12316; min-height: 100vh; text-align: center">
    <div
      class="pond-head"
      :style="{
        'background-image': `url(http://sdc.dev.dgyunju.cn/plugins/pond/assets/img/pond-head.png)`,
      }"
    ></div>
    <div class="choose" v-if="isAll">
      您还有<span style="color: #f47915; font-weight: bold">{{ isAll }}</span
      >次抽奖机会
    </div>
    <div class="center">
      <LuckyWheel
        ref="myLucky"
        width="270px"
        height="270px"
        :prizes="prizes"
        :blocks="blocks"
        :buttons="buttons"
        @start="startCallback"
        @end="endCallback"
        style="margin: 0 auto"
      />
    </div>
    <!-- 活动弹窗 -->
    <div v-if="status == 2">
      <div class="act-modal">
        <div class="act-modal-bg" />
        <div class="act-modal-pic cross-center main-center">
          <div class="act-modal-info success">
            <i
              class="image-bg"
              :style="{
                'background-image': `url(http://sdc.dev.dgyunju.cn/plugins/pond/assets/img/pond-success.png)`,
              }"
            >
            </i>
            <div>
              <i @click="closeActModal" class="image-close" type />
            </div>
            <div class="main-center">
              <div style="font-size: 18px" class="text">恭喜<br />抽中{{ name }}</div>
            </div>
            <div class="main-center">
              <div class="box main-center">
                <button @click="closeActModal" class="btn">继续抽奖</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-if="status == 1">
      <div class="act-modal show">
        <div class="act-modal-bg" />
        <div class="act-modal-pic cross-center main-center">
          <div class="act-modal-info error">
            <i
              class="image-bg"
              :style="{
                'background-image': `url(http://sdc.dev.dgyunju.cn/plugins/pond/assets/img/pond-empty.png)`,
              }"
            >
            </i>
            <div>
              <i @click="closeActModal" class="image-close" type />
            </div>
            <div class="main-center">
              <div style="font-size: 18px" class="text">谢谢参与<br />再换个姿势抽奖</div>
            </div>
            <div class="main-center">
              <div class="box main-center">
                <button @click="closeActModal" class="btn">继续抽奖</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getPondList, getPondLottery } from '@/apis/pond'
import qs from 'qs'
import wx from 'weixin-js-sdk'
export default {
  data() {
    return {
      isTrue: false,
      status: 0,
      free_oppty: 0,
      oppty: 0,
      name: '',
      blocks: [{
        padding: '10px',
        imgs: [{
          src: 'https://paidou.cdn.dgyunju.cn/image/lottery-bg.png',
          width: '100%'
        }]
      }
      ],
      prizes: [
        { fonts: [{ text: 'xx', top: '10%' }], background: '#ffd099' },
        { fonts: [{ text: 'xx', top: '10%' }], background: '#ffffff' },
        { fonts: [{ text: 'xx', top: '10%' }], background: '#ffd099' },
        { fonts: [{ text: 'xx', top: '10%' }], background: '#ffffff' },
        { fonts: [{ text: 'xx', top: '10%' }], background: '#ffd099' },
        { fonts: [{ text: 'xx', top: '10%' }], background: '#ffffff' },
      ],
      buttons: [{
        radius: '40px',
        background: '#f12416'
      },
      {
        radius: '60px',
        imgs: [{
          src: 'https://paidou.cdn.dgyunju.cn/image/action-bg.png',
          width: '100%',
          top: '-62px'
        }]
      }
      ]
    }
  },
  created() {
    // const token1='nAcSvMPGZjnZNgsrO1Nq7lcVlIm1Gu_v#/index'
    console.log('获取传递的数据', qs.parse(window.location.href.split('?')[1]))
    let data = qs.parse(window.location.href.split('?')[1])
    console.log(data, 124);
    if (data.platForm) {
      localStorage.setItem('u-data', JSON.stringify(data))
    }
    const token1 = data.token
    // if(token1.indexOf('#/index'))
    if (token1) {
      // console.log(token1);
      this.isTrue = true
      localStorage.setItem('u-token', token1)
      this.getPond()
    } else {
      this.isTrue = false
    }
  },
  computed: {
    isAll() {
      return this.oppty + this.free_oppty
    }
  },
  methods: {
    closeActModal() {
      this.status = 0;
    },
    async getPond() {
      const res = await getPondList()

      let newList = res.data.list.map(i => {
        return {
          text: i.name,
          fontSize: '12px',
          top: '10%',
          fontColor: '#ac1120',
          ...i
        };
      });
      let alllist = [];
      this.free_oppty = res.data.free_oppty;
      this.oppty = res.data.oppty;
      newList.forEach((i, v) => {
        alllist.push({
          fonts: [i],
          background: v % 2 === 0 ? '#ffd099' : '#ffffff',
          imgs: [{
            src: require('../assets/pond-xx.png'),
            width: '45%',
            top: '30px'
          }]
        });
      });
      this.prizes = alllist;
      console.log(this.prizes, 115);
    },
    // 点击抽奖按钮会触发star回调
    startCallback() {
      let that = this
      if (!this.isTrue) {
        let infoList = {
          type: "share",// H5消息的消息类型  
          messageData: {
            shareTitle: "none-token",// 分享标题  
          }
        }
        wx.miniProgram.navigateTo({
          url: `/pages/web/web?data=${JSON.stringify(infoList)}`
        })
        // wx.miniProgram.postMessage({ data: infoList })
        return
      }
      // 调用抽奖组件的play方法开始游戏 
      this.$refs.myLucky.play()
      // 模拟调用接口异步抽奖
      setTimeout(() => {
        // 假设后端返回的中奖索引是0
        // 调用stop停止旋转并传递中奖索引
        getPondLottery().then(res => {
          if (res.code == 0) {
            that.oppty = res.data.oppty;
            that.free_oppty = res.data.free_oppty;
            that.prizes.forEach((i, v) => {
              if (i.fonts[0].id == res.data.id) {
                that.$refs.myLucky.stop(v);
              }
            });
          }
        });
      }, 3000)
    },
    // 抽奖结束会触发end回调
    endCallback(prize) {
      console.log(prize)
      this.name = prize.fonts[0].name;
      this.status = prize.fonts[0].type == 5 ? 1 : 2;
    },
  }
}
</script>
<style lang="scss" scoped>
.pond-head {
  height: 480px;
  width: 100%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin-bottom: 40px;
}
.choose {
  display: inline-block;
  padding: 10px 15px;
  background-color: #00000059;
  color: #fff;
  font-size: 22px;
  text-align: center;
  border-radius: 20px;
  margin-bottom: 30px;
  width: 30%;
}
.center {
  width: 90%;
  // height: 200px;
  border-radius: 20px;
  background-color: #f47915;
  margin: 0 auto;
  padding: 30px 0;
}
.main-center {
  display: flex;
  justify-content: center;
}
.act-modal {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 2001;
  transition: 200ms;

  .show {
    visibility: visible;
    opacity: 1;
  }

  .act-modal-bg {
    background: rgba(0, 0, 0, 0.5);
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
  }

  .act-modal-pic {
    background: rgba(0, 0, 0, 0.25);
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
  }

  .act-modal-info {
    text-align: center;
    position: relative;

    .h5-limit {
      margin: -1px 0;
    }
  }

  .success {
    top: 40%;
    width: 100%;

    .image-bg {
      height: 462px;
      width: 100%;
      display: block;
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }

    .image-close {
      position: absolute;
      right: 80px;
      top: 0;
      height: 30px;
      width: 30px;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      background-image: url("https://sdcwxapp.cdn.dgyunju.cn/image/icon/close.png");
    }

    .text,
    .box {
      width: 591px;
      background: #ffffff;
      color: #353535;
    }

    .box {
      border-radius: 0 0 16px 16px;
      text-align: center;
      padding: 64px 0;
      .btn {
        font-size: 18px;
        background-color: #ff4544;
        border-radius: 20px;
        color: #ffffff;
        padding: 20px 100px;
        border: none;
      }
    }
  }

  .error {
    top: 40%;
    width: 100%;

    .image-bg {
      height: 240px;
      width: 100%;
      display: block;
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }

    .image-close {
      position: absolute;
      right: 80px;
      top: 0;
      height: 30px;
      width: 30px;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      background-image: url("https://sdcwxapp.cdn.dgyunju.cn/image/icon/close.png");
    }

    .text,
    .box {
      width: 591px;
      background: #ffffff;
      color: #353535;
    }

    .box {
      border-radius: 0 0 16px 16px;
      text-align: center;
      padding: 64px 0;
      .btn {
        font-size: 18px;
        background-color: #ff4544;
        border-radius: 20px;
        color: #ffffff;
        padding: 20px 100px;
        border: none;
      }
    }
  }
}
</style>